<template>
  <view class="category">
    <!-- 搜索组件 -->
    <UgoSearch></UgoSearch>
    <view class="main">
      <!-- 左侧菜单 -->
      <view class="menus">
        <view
          class="item"
          :class="index === current ? 'active' : ''"
          @click="currentChange(index)"
          v-for="(item, index) in menus"
          :key="item"
          >{{ item }}</view
        >
      </view>
      <!-- 右侧内容 -->
      <view class="content">
        <view class="group" v-for="item1 in contents" :key="item1.cat_id">
          <view class="group-title">{{ item1.cat_name }}</view>
          <view class="group-content">
            <navigator v-for="item2 in item1.children" :key="item2.cat_id" :url="`/pages/goods_list/goods_list?cid=${item2.cat_id}`">
              <u-image :src="item2.cat_icon" mode="widthFix"></u-image>
              <view>{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      menus: [],
      contents: [],
      current: 0,
    };
  },
  methods: {
    currentChange(index) {
      // 选中标题 标红
      this.current = index;
      // 右侧内容切换
      this.contents = this.category[index].children;
    },
  },
  async onLoad() {
    const result = await this.$u.get("/categories");
    this.category = result.message;
    console.log(result);
    // 处理左侧的数据
    this.menus = result.message.map((item) => item.cat_name);
    // 处理右侧的数据
    this.contents = result.message[0].children;
    localStorage
  },
};
</script>

<style lang="scss">
.category {
  .main {
    height: calc(100vh - 84rpx);
    display: flex;
    .menus {
      overflow: auto;
      width: 182rpx;
      .item {
        height: 70rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .active {
        color: #eb4450;
      }
    }
    .content {
      flex: 1;
      overflow: auto;
      .group-title {
        height: 70rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        &::before {
          content: "/";
          margin-right: 10rpx;
        }
        &::after {
          content: "/";
          margin-left: 10rpx;
        }
      }
      .group-content {
        display: flex;
        flex-wrap: wrap;
        padding: 0 48rpx;

        navigator {
          width: 120rpx;
          margin-right: 56rpx;
        }
        // 3倍数
        navigator:nth-child(3n) {
          margin-right: 0rpx;
        }
      }
    }
  }
}
</style>